<template>
  <div class="zx-buttom">
    <ul v-if="type === 'tab'" class="tab">
      <li v-for="(btn, index) in data" :key="index" :class="{cur: index===nowCur}" @click="myclick(index)" >{{ btn }}</li>
    </ul>
    <ul v-if="type === 'choose'" class="btn">
      <li @click="myclick(0)">{{ data[0] }}</li>
      <li @click="myclick(1)">{{ data[1] }}</li>
    </ul>
    <ul v-if="type === 'button'" class="btn">
      <li @click="myclick(0)">{{ data[0] }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'zxButton',
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    },
    marginLeft: {
      type: String,
      default: '10px'
    },
    type: {
      type: String,
      default: 'tab'
    }
  },
  data () {
    return {
      nowCur: 0,
      butTypea: 'primary',
      butTypeB: 'default'
    }
  },
  methods: {
    myclick (val) {
      this.nowCur = val
      this.$emit('on-click', val)
    }
  },
  mounted: function () { }
}
</script>
<style lang="less">
.zx-buttom { width: 100%; height: 100%;}
.zx-buttom>ul { display: flex;}
.zx-buttom>ul>li { flex: 1; height: 100%;}
.zx-buttom>.btn { width: 100%;}
.zx-buttom>.btn li { text-align: center; line-height:0.9rem; font-size: 0.36rem; color: #9B9B9B;}
.zx-buttom>.btn li:active { background: #DBDBDB;}
.zx-buttom>.btn li:last-child { border-left:1px solid #DBDBDB; color: #F28300;}
.zx-buttom>.tab { width: 100%; border: 1px solid #EC1B30; border-radius: 0.06rem;}
.zx-buttom>.tab li { height: 0.6rem; line-height: 0.6rem; color: #EC1B30; text-align: center; border-right: 1px solid #EC1B30;}
.zx-buttom>.tab li:last-child { border-right: none;}
.zx-buttom>.tab li.cur { background: #EC1B30; color: #fff;}
</style>
